<template>
  <div class="blue-hurdle-container">

    <div class="blue-hurdle-about-us">
      <div class="blue-hurdle-about-con">
        <span class="collect-text" @click="favorite()">收藏我们</span>|<span
        class="service-text">客服电话：400-9600395</span>
      </div>
    </div>

    <div class="blue-hurdle-box" @mouseleave="mouseLeave" :class="{'hurdle-roll-box':isFixed}">

      <div class="blue-hurdle-tab-con">

        <div class="blue-logo-box">
          <img src="../images/logo.png" class="blue-pic1"/>
          <span class="logo-text" @click="toIndex">广东蓝聘网络科技</span>
        </div>

        <div class="blue-tab-box">
          <li @click="openPage(1,'/index')">
            <a :class="{'li-select-active':lineNum == 1}">首页</a>
            <span :class="{'line-box':lineNum == 1}"></span>
          </li>
          <li @click="openPage(2,'/introduce')">
            <a :class="{'li-select-active':lineNum == 2}">APP介绍</a>
            <span :class="{'line-box':lineNum == 2}"></span>
          </li>
          <li @click="openPage(3,'/aboutUs')">
            <a :class="{'li-select-active':lineNum == 3}">关于我们</a>
            <span :class="{'line-box':lineNum == 3}"></span>
          </li>
          <li @click="openPage(4,'/news')">
            <a :class="{'li-select-active':lineNum == 4}">新闻动态</a>
            <span :class="{'line-box':lineNum == 4}"></span>
          </li>
          <li @click="openPage(5,'/contactUs')">
            <a :class="{'li-select-active':lineNum == 5}">联系我们</a>
            <span :class="{'line-box':lineNum == 5}"></span>
          </li>
          <li>
            <el-button type="primary" size="mini" class="down-text" @click="openDownCode">下载APP</el-button>
          </li>
          <li>
            <span class="success-text" v-if="userName" @mouseenter="mouseOver">{{userName}}</span>
            <div v-else>
              <span class="login-text" @click="openLoginModal">登录</span>|<span class="register-text"
                                                                               @click="openRegisterPage">注册</span>
            </div>
          </li>
        </div>

        <div class="other-fun-box" v-show="showOtherFun" @mouseleave="mouseLeave">
          <span @click="openOtherPage('/interview')">面试预约</span>
          <span @click="openOtherPage('/collectWork')">收藏企业</span>
          <span @click="openOtherPage('/modifyPwd')">修改密码</span>
          <span @click="loginOut">退出账号</span>
        </div>
      </div>

    </div>

    <login-popup :showModal="showModal" @closeModal="closeModal" @loginBackCall="loginBackCall"></login-popup>
    <down-app :showDownModal="showDownModal" @closeDownModal="closeDownModal"></down-app>
  </div>
</template>

<script>
  import loginPopup from "../components/loginPopup";
  import {getSessionStore, removeSessionStore} from "../config/util";
  import downApp from "../components/downApp";
  import {baseUrl} from "../config/env";
  import {clearCache} from "../config/verify";

  export default {
    inject: ['reload'],
    props: {
      showLine: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        lineNum: 1,
        showOtherFun: false,
        showModal: false,
        userName: "",
        showDownModal: false,
        userWand: "",
        isFixed: false,//bar浮动
        offsetTop: 500,//触发bar浮动的阈值
      }
    },
    created() {
      this.lineNum = this.showLine;
      if (getSessionStore("nickName")) {
        this.userName = getSessionStore("nickName");
      }

      let base64 = require('js-base64').Base64;
      if (getSessionStore("userWand")) {
        this.userWand = base64.decode(getSessionStore("userWand"));
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      favorite() {
        let sTitle = document.title;
        let sURL = location.href;
        try {
          window.external.addFavorite(sURL, sTitle);
        }
        catch (e) {
          try {
            window.sidebar.addPanel(sTitle, sURL, "");
          }
          catch (e) {
            this.$message({message: "您的浏览器不支持,请按Ctrl+D手动收藏！", center: true, type: 'error', duration: 1000});
          }
        }
      },
      handleScroll() {//监听滚动条滚动的距离
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= this.offsetTop) {
          this.isFixed = true;
        } else {
          this.isFixed = false;
        }
      },
      mouseOver() {
        this.showOtherFun = true;
      },
      mouseLeave() {
        this.showOtherFun = false;
      },
      openPage(index, path) {
        clearCache();
        this.lineNum = index;
        this.$router.push(path);
      },
      openLoginModal() {
        this.showModal = true;
      },
      closeModal() {
        this.showModal = false;
      },
      closeDownModal() {
        this.showDownModal = false;
      },
      openRegisterPage() {
        this.$router.push("/register");
      },
      openOtherPage(path) {
        clearCache();
        this.$router.push(path);
      },
      loginOut() {
        this.axios.get(baseUrl + "/login/user_sign_out?sgin=" + this.userWand).then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            clearCache();
            this.userName = "";
            this.showModal = false;
            this.showOtherFun = false;
            removeSessionStore("userWand");
            removeSessionStore("nickName");
            removeSessionStore("userToken");
            if (this.$route.path == "/interview" || this.$route.path == "/collectWork" || this.$route.path == "/modifyPwd") {
              this.$router.push("/login");
            } else {
              this.reload();
            }
          } else {
            this.$message({message: retObj.msg, center: true, type: 'error'});
          }
        });
      },
      loginBackCall(nickName) {
        this.userName = nickName;
        this.reload();
      },
      openDownCode() {
        this.showDownModal = true;
      },
      toIndex() {
        this.$router.push("/index");
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    components: {
      downApp,
      loginPopup
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .blue-hurdle-container {
    .wh(100%, 104px);
    border-bottom: 1px solid #EBEBEB;
    .blue-hurdle-about-us {
      display: flex;
      justify-content: center;
      background: #F2F4F5;
      .wh(100%, 24px);
      .blue-hurdle-about-con {
        .fj(center, flex-end);
        .wh(1200px, 24px);
        .size-color(14px, #4D4D4D);
        .collect-text {
          padding-right: 15px;
          cursor: pointer;
          &:hover {
            color: #3CAFFF;
          }
        }
        .service-text {
          padding-left: 15px;
        }
      }
    }
    .blue-hurdle-box {
      display: flex;
      justify-content: center;
      .wh(100%, 80px);
      background: #FFF;
      .blue-hurdle-tab-con {
        display: flex;
        align-items: center;
        .wh(1200px, 80px);
        position: relative;
        .blue-logo-box {
          display: flex;
          align-items: center;
          .wh(auto, 54px);
          .blue-pic1 {
            .wh(54px, 54px)
          }
          .logo-text {
            padding-left: 14px;
            padding-right: 86px;
            .size-color(24px, #186EB7);
            &:hover {
              cursor: pointer;
            }
          }
        }
        .blue-tab-box {
          display: flex;
          align-items: center;
          flex: 1;
          li {
            flex: 1;
            height: 36px;
            text-align: center;
            line-height: 36px;
            a {
              .size-color(16px, #4D4D4D);
              &:hover {
                color: #3CAFFF;
                font-weight: 500;
                cursor: pointer;
              }
            }
            .login-text {
              padding-right: 4px;
              color: #47718F;
              cursor: pointer;
              .size-color(16px, #47718F);
            }
            .register-text {
              padding-left: 4px;
              cursor: pointer;
              .size-color(16px, #47718F);
            }
            .success-text {
              display: block;
              .ellipsis(122px);
              cursor: pointer;
              .size-color(18px, #47718F)
            }
            .down-text {
              .size-color(16px, rgba(255, 255, 255, 1));
            }
          }
          .li-select-active {
            .size-color-weight(18px, #3CAFFF, 500);
          }
          .line-box {
            display: block;
            .wh(24px, 3px);
            background: #3CAFFF;
            margin: 0 auto;
          }
        }
        .other-fun-box {
          position: absolute;
          top: 80px;
          right: 0;
          z-index: 99;
          background: #FFF;
          display: flex;
          flex-direction: column;
          span {
            .wh(120px, 40px);
            line-height: 40px;
            text-align: center;
            .size-color(16px, #47718F);
            &:hover {
              color: #3E637D;
              cursor: pointer;
            }
          }
        }
      }
    }
    .hurdle-roll-box {
      position: fixed;
      .wh(100%, 80px);
      border-bottom: 1px solid #EBEBEB;
      background: #FFF;
      top: 0;
      z-index: 99;
    }
  }
</style>


